<template>
	<!-- #ifndef APP || H5 -->
	<u-tabbar :value="currentTab" activeColor="#42E0A2" inactiveColor="#333333" :border="false">
		<u-tabbar-item v-for="(item,i) in tabList" :key="item.name" :text="item.text" :name="item.name" @click="handTab(item)">
			<image class="bar_img" :style="item.bigicon" slot='inactive-icon' :src="item.iconPath" v-if="item.text == ''"></image>
			<text class="text" slot="text" :class="{active: item.name == currentTab}">{{ item.text }}</text>
		</u-tabbar-item>
	</u-tabbar>
	<!-- #endif -->
</template>

<script>
	import { getOrderAndNumber, isEmpty } from '@/utils/index.js';
	export default {
		name: "TabBar",
		props: {
			currentTab: {
				type: String,
				default: 'home'
			}
		},	
		data() {
			return {
				tabList: [{
						"pagePath": "/pages/index/index",
						"iconPath": "/static/icon-home.png",
						"selectedIconPath": "/static/icon-home-selected.png",
						"text": "充电",
						"name": 'home'
					},
					{
						"pagePath": "/pages/map/index",
						"iconPath": "/static/icon-find.png",
						// "selectedIconPath": "/static/icon-find-selected.png",
						"text": "地图",
						"name": "mapIndex",
					},
					{
						"pagePath": "/pages/scan",
						"iconPath": "/static/tabbar/scan.png",
						"selectedIconPath": "/static/tabbar/scan.png",
						"text": "",
						"name": "scan",
						"bigicon": 'width:110rpx;height:110rpx;position: relative;bottom:20rpx;'
					},
					{
						"pagePath": "/pages/order/order",
						"iconPath": "/static/icon-wallet.png",
						// "selectedIconPath": "/static/icon-wallet-selected.png",
						"text": "订单",
						"name": "order"
					},
					{
						"pagePath": "/pages/user/user",
						"iconPath": "/static/icon-mine.png",
						// "selectedIconPath": "/static/icon-mine-selected.png",
						"text": "我的",
						"name": "user"
					}
				]
			}
		},
		methods: {
			handTab(row) {
				if(row.name == 'scan'){
					this.scanQrCode();
					return;
				}
				uni.switchTab({ url: row.pagePath })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bar_img {
		width: 106rpx!important;
		height: 106rpx!important;
		bottom: 0!important;
	}
	
	/deep/ .u-tabbar__content {
		padding-top: 10rpx;
		border-radius: 49rpx 49rpx 0rpx 0rpx;
	}
	
	.text {
		font-size: 32rpx;
		font-weight: 600;
		font-family: "PINGFANG";
	}
	
	.active {
		color: #42E0A2;
	}
</style>